<template>
  <div class='nav-buoy-wrapper'>
    <buoy :lockPosition='true'
          :defaultTop='defaultTop'
          @clicked='handleClick'>
      <div class="buoy-content">
        <div class="buoy-title">
          <span class="text">导航</span>
          <span class="icon_buoy"></span>
        </div>
      </div>
    </buoy>
    <div class='nav-buoy-menu' @touchmove.prevent='move'>
      <scroll :isEnd='true'
              :isLoading='false'
              :showNoMore='false'
              ref='scrollNav'>
        <!-- 登录个人信息 -->
        <div class='user-info'>
          <div  class='user-info-avatar'
                :style='{ backgroundImage: "url("+ userInfo.avatar +")"}'></div>
          <div class='user-info-nickname'>{{userInfo.userName || userInfo.nickName}}</div>
        </div>
        <!-- 导航列表 -->
        <ul class='menu-list'>
          <li class='menu-item' v-for='(nav, index) of navList' :key='"nav" + index'>
            <div class='menu-item-header' @click='nav.isDir ? toggleShowSubMenu(nav, index) : goToPage(nav)'>
              <div class='menu-item-header-title'>
                {{nav.pageName}}
                <span class='menu-item-header-arrow'
                    v-show='nav.children && nav.children[0]'
                    :class='{hide:nav.isShow}'
                    @click.stop='toggleShowSubMenu(nav, index)'></span>
              </div>
            </div>
            <div class='menu-item-sub-wrapper'
                 v-if='nav.children && nav.children[0]'
                 :style='{maxHeight: nav.isShow ? nav.children.length * 37 + 10 + "px" : 0}'>
              <div class='menu-item-sub'>
                <div :class="{active: $route.name === subNav.pageId}" class='menu-item-sub-item'
                     v-for='(subNav, index) of nav.children' :key='"subNav" + index'
                     @click='goToPage(subNav)'>
                  {{subNav.pageName}}
                  <div class='menu-item-sub-split'></div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </scroll>
    </div>
    <div class='nav-buoy-mask' v-show='showMenu' @click='hideMenu' @touchmove.prevent='move'></div>
  </div>
</template>

<script>
import buoy from './buoy'
import scroll from './scroll'
export default {
  name: 'nav-buoy',
  data () {
    return {
      bgColor: '#55C4E4',
      showMenu: false,
      navBarBuoyMode: 'nav',
      navList: [
        // {
        //   'routeName': '',
        //   'pageName': '咨询前沿',
        //   'isShow': false,
        //   'isDir': 1,
        //   'pageId': '1281543930516606977', // V观美学
        //   // 'pageId': '1278525262403297282', // 悦米技术服务
        //   'children': [
        //     {
        //       'routeName': 'liveList',
        //       'pageName': '会议直播间',
        //       'children': [],
        //       'pageId': '1281544235681583105'
        //     },
        //     {
        //       'routeName': 'activity',
        //       'pageName': '精品活动',
        //       'children': [],
        //       'pageId': '1281544348621606914' // V观美学
        //       // 'pageId': '1278525364673011714' // 悦米技术服务
        //     },
        //     {
        //       'routeName': 'overseasInfo',
        //       'pageName': '海外资讯',
        //       'children': [],
        //       'pageId': '1281546381525258242' // V观美学
        //       // 'pageId': '1278525414404874241' // 悦米技术服务
        //     }
        //   ]
        // },
        // {
        //   'routeName': '',
        //   'pageName': '学术荟萃',
        //   'isShow': false,
        //   'isDir': 1,
        //   'pageId': '1281548348205043713', // V观美学
        //   // 'pageId': '1278525448487788546', // 悦米技术服务
        //   'children': [
        //     {
        //       'routeName': 'zhuDongMai',
        //       'pageName': '主动脉',
        //       'children': [],
        //       'pageId': '1281548393302200321' // V观美学
        //       // 'pageId': '1278525476409270274' // 悦米技术服务
        //     },
        //     {
        //       'routeName': 'xiaZhiDongMai',
        //       'pageName': '下肢动脉',
        //       'children': [],
        //       'pageId': '1281548683736780802' // V观美学
        //       // 'pageId': '1278525506058805249' // 悦米技术服务
        //     },
        //     {
        //       'routeName': 'jingDongMai',
        //       'pageName': '颈动脉',
        //       'children': [],
        //       'pageId': '1281549049043881985' // V观美学
        //       // 'pageId': '1278525549570514946' // 悦米技术服务
        //     },
        //     {
        //       'routeName': 'jingMai',
        //       'pageName': '静脉',
        //       'children': [],
        //       'pageId': '1281549278631694338' // V观美学
        //       // 'pageId': '1278525589147967489' // 悦米技术服务
        //     }
        //   ]
        // },
        // {
        //   'routeName': 'userCenter',
        //   'pageName': '个人中心',
        //   'isShow': false,
        //   'children': [],
        //   'pageId': '1287992954211799041' // V观美学
        //   // 'pageId': '1278525624346566658' // 悦米技术服务
        // }
      ],
      userInfo: {},
      isSubscribe: false,
      fansNickName: ''
    }
  },
  components: {
    buoy,
    scroll
  },
  props: {
    // 默认的距离顶部的距离
    defaultTop: {
      type: Number,
      default: 30
    }
  },
  methods: {
    init () {
      // 初始化浮标设置
      // if (localStorage.getItem('navSetting')) {
      //   let navSetting = JSON.parse(localStorage.getItem('navSetting'))
      //   this.bgColor = navSetting.bgColor ? navSetting.bgColor : '#55C4E4'
      //   this.navBarBuoyMode = navSetting.navBarBuoyMode ? navSetting.navBarBuoyMode : 'home'
      //   this.homePageId = navSetting.homePageId ? navSetting.homePageId : ''
      // } else {
      //   this.bgColor = '#55C4E4'
      //   this.navBarBuoyMode = 'home'
      //   this.homePageId = ''
      // }
      // 如果浮标模式是 导航切换
      if (this.navBarBuoyMode === 'nav') {
        if (localStorage.getItem('buoyNavList')) {
          let stepList = JSON.parse(localStorage.getItem('buoyNavList'))
          stepList.forEach(item => { item.isShow = false })
          this.navList = stepList
        } else {
          this.navList = []
        }
        this.isSubscribe = this.checkIfSubscribe()
        if (this.isSubscribe === 1) {
          this.userInfo.avatar = localStorage.getItem('fansAvatar') ? localStorage.getItem('fansAvatar') : ''
          this.userInfo.nickName = localStorage.getItem('fansNickName') ? localStorage.getItem('fansNickName') : ''
          this.userInfo.userName = localStorage.getItem('userName') ? localStorage.getItem('userName') : ''
        } else {
          this.userInfo.avatar = ''
          this.userInfo.nickName = '游客'
          this.userInfo.userName = '游客'
        }
      }
    },
    handleClick () {
      if (this.navBarBuoyMode === 'home') {
        if (this.homePageId) {
          location.href = `${location.origin}${this.BASE_URL}${this.VERSION}/custom/${this.homePageId}`
        }
      } else {
        this.init()
        window.eventBus.$emit('toggleLeftMenu', true)
        this.showMenu = true
      }
    },
    hideMenu () {
      window.eventBus.$emit('toggleLeftMenu', false)
      this.showMenu = false
    },
    move () {
    },
    toggleShowSubMenu (nav, navIndex) {
      if (nav.children && nav.children[0]) {
        this.navList.forEach((item, index) => {
          if (index === navIndex) {
            item.isShow = !item.isShow
          } else {
            // item.isShow = false
          }
        })
      }
      setTimeout(() => {
        this.$refs.scrollNav.refresh()
      }, 200)
    },
    goToPage (nav) {
      this.hideMenu()
      if (nav.pageId !== this.$route.name) {
        // 如果点击的是个人中心
        if (nav.pageId === '1287992954211799041') {
          this.isSubscribe = this.checkIfSubscribe()
          // 如果用户没有关注公众号
          if (this.isSubscribe !== 1) {
            this.hideMenu()
            window.eventBus.$emit('showWechatQr')
          } else {
            // 如果是粉丝，则直接跳转到注册选择角色页面
            let userType = localStorage.getItem('userType') || '-1'
            if (userType === '-1') {
              this.$router.push({ name: 'registerIndex' })
            // 如果已经认证，进入个人中心
            } else {
              this.$router.push({ name: '1287992954211799041' })
            }
          }
        // 如果是点击快速测评
        } else if (nav.pageId === '1306536543078322178') {
          // 兴齐的逻辑点击快速测评到固定题目页
          // this.$router.push({ name: 'surveyPaper', params: { paperId: this.PAPERID } })
          // 现在的逻辑点击快速测评到题目列表页
          this.$router.push({ name: '1311256584629784577' })
        } else {
          setTimeout(() => {
            if (nav.type) {
              this.$router.push({ name: nav.pageId, query: { type: nav.type } })
            } else {
              this.$router.push({ name: nav.pageId })
            }
          }, 0)
        }
      } else {
        this.navList.forEach(item => { item.isShow = false })
      }
    },
    showQrIfUnsubscribe () {
      this.isSubscribe = this.checkIfSubscribe()
      if (this.isSubscribe !== 1) {
        this.hideMenu()
        window.eventBus.$emit('showWechatQr')
      } else {
        this.$router.push({ name: '1287992954211799041' })
      }
    }
  },
  mounted () {
    this.init()
    window.eventBus.$on('updateFansInfo', isShow => {
      this.init()
    })
  }
}
</script>

<style lang="stylus" scoped>
.nav-buoy-wrapper
  .buoy-content
    color #fff
    .buoy-title
      width 53px
      height 26px
      background rgba(47, 179, 227, 1)
      padding-left 10px
      box-sizing border-box
      box-shadow 10px 0px 30px 0px rgba(20,39,49,0.1),0px 2px 8px 0px rgba(42,43,48,0.09)
      display flex
      align-items center
      .text
        font-size 12px
        color #fff
        white-space nowrap
      .icon_buoy
        display inline-block
        width 12px
        height 12px
        background url('../assets/img/combine_nav@2x.png.png') no-repeat center / auto 9px
        margin-left 2px
  .nav-buoy-menu
    position fixed
    right -160px
    top 0
    bottom 0
    z-index 101
    width 160px
    opacity 1
    background rgba(225, 246, 253, 1)
    &::before
      content ''
      display block
      position absolute
      top 0
      left 0
      bottom 0
      z-index 10
      width 20px
      background linear-gradient(90deg, rgba(150,150,150,0.1), rgba(0,0,0,0))
    .user-info
      opacity 1
      height 167px
      padding-top 50px
      .user-info-avatar
        width 52px
        height 52px
        border-radius 50%
        background-position center center
        background-size cover
        background-repeat no-repeat
        background-color #ddd
        margin 0 auto 12px
      .user-info-nickname
        text-align center
        font-size 22px
        font-weight 700
        line-height 28px
        color #25679B
        padding 0 10px
        noWrap()
    .menu-list
      .menu-item
        margin-bottom 10px
        .menu-item-header
          height 32px
          line-height 32px
          color #fff
          font-size 14px
          font-weight 700
          display flex
          justify-content center
          background rgba(47, 179, 227, 1)
          .menu-item-header-title
            display block
            position relative
            .menu-item-header-arrow
              display inline-block
              width 16px
              height 16px
              position absolute
              top 50%
              right -30px
              transform translate(0, -50%)
              transition all ease 0.3s
              background url('../assets/img/down@2x.png') no-repeat center / 100%
              &.hide
                transform translate(0, -50%) rotate(180deg)
                background-image url('../assets/img/down@2x.png')
        .menu-item-sub-wrapper
          overflow hidden
          max-height 0
          transition all linear 0.2s
          .menu-item-sub
            background #FFFFFF
            color rgba(47, 179, 227, 0.5)
            .menu-item-sub-item
              position relative
              font-size 12px
              height 32px
              line-height 32px
              text-align center
              border-top 1px solid #f5fbff
              noWrap()
              &.active
                color rgba(47, 179, 227, 1)
                font-weight 700
              &:last-child
                .menu-item-sub-split
                  display none
              .menu-item-sub-split
                setBottomLine(#E5E5E5)
  .nav-buoy-mask
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    z-index 100
</style>
